<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{border: solid 1px black;padding: 10px;width: 600px;}
    </style>
</head>
<body>
    <input type="text" id="txt"><input type="button" id="btn" value="搜索">
    <div class="box">
        使用 Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步 有什么区别呢？我们普通的 Web 程序开发基本都是同步的，意为执行一段程序才能执行下 一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务， 感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax 也可以 使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一 条执行，会让 Web 页面出现假死状态，所以，一般 Ajax 大部分采用异步模式。
    </div>
</body>
<script>
    
    const obtn = document.querySelector("#btn")
    const otxt = document.querySelector("#txt")
    const obox = document.querySelector(".box")
    const str = obox.innerHTML;

    obtn.onclick = function(){

        const sk = otxt.value;
        const reg = new RegExp("(" + sk + ")+", "g");

        // obox.innerHTML = str.replace(reg, "<mark>"+sk+"</mark>");

        obox.innerHTML = str.replace(reg, "<mark>$1</mark>");
    }

</script>
</html>